<template>
  <div class="order-list-container"
    ref="wrap">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>营销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>分销设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :rules="rules"
        label-width="120px"
        :model="info"
        ref="formData">
        <el-form-item label="奖励计算方法："
          required>
          <p>
            <el-radio :label="1"
              v-model="info.state">按订单固定金额设置</el-radio>
            <span class="title">设置分享营销奖励金额为20元，推荐注册人每成交订单，将发放20元奖励；实际收益还会扣除10%的提现手续费</span>
          </p>
        </el-form-item>
        <el-form-item>
          <p>
            <el-radio :label="2"
              v-model="info.state">按订单金额比例设置</el-radio>
            <span class="title">设置分享营销奖励比例为5%，推荐注册人每成交订单（如：成交订单金额为500元），奖励发放500*5%=25元；实际收益还会扣除10%的提现手续费</span>
          </p>
        </el-form-item>
        <el-form-item label="奖励金额:"
          v-if="info.state == 1"
          prop="num">
          <el-input-number controls-position="right"
            :min="2"
            :max="200"
            v-model="info.num"
            size="small" precision="0"></el-input-number>&nbsp;&nbsp;
          <span>元</span>
        </el-form-item>
        <el-form-item label="奖励比例:"
          v-if="info.state == 2"
          prop="ratio">
          <el-input-number controls-position="right"
            size="small"
            :min="1"
            :max="20"
            v-model="info.ratio" precision="0"></el-input-number>&nbsp;&nbsp;
          <span>%</span>
        </el-form-item>
        <div class="information-btns"
          :style="{width:width}">
          <el-button type="primary"
            size="small"
            @click="sure('formData')">保存</el-button>
          <el-button @click="back"
            size="small">取消</el-button>
        </div>
      </el-form>

    </div>

  </div>
</template>

<script>
import { getDistribution, setDistribution } from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      width: "",
      id: "",
      info: {
        state: 1
      },
      rules: {
        num: [{ required: true, message: "请输入奖励金额", trigger: "blur" }],
        ratio: [{ required: true, message: "请输入奖励比例", trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$router.back();
    },
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          setDistribution({
            id: this.info.id,
            method: this.info.state,
            money: this.info.state == 1 ? this.info.num : 0,
            ratio: this.info.state == 2 ? this.info.ratio : 0
          }).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "修改成功"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    _getDistribution() {
      getDistribution().then(res => {
        console.log(res);
        this.info = res.data.info
          ? res.data.info
          : {
              id: "",
              state: 1,
              num: 100,
              ratio: undefined
            };
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this._getDistribution();
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  }
};
</script>
<style lang="scss" scoped>
.easy-content {
  .title {
    color: #999;
    padding-left: 30px;
    display: block;
  }
  .information-btns {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    margin-left: -30px;
    z-index: 1111;
  }
  .avatar {
  }
}
</style>